<!--Reference Link http://html5.litten.com/moving-shapes-on-the-html5-canvas-with-the-keyboard/ -->

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
	<section>

		<div>
			<canvas id="canvas" width="300" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>   
		</div>

		<script type="text/javascript">
			var canvas;
			var ctx;
			var dx = 5;
			var dy = 5;
			var x = 150;
			var y = 100;
			var WIDTH = 300;
			var HEIGHT = 200;

			function circle(x, y, r) {
				ctx.beginPath();
				ctx.arc(x, y, r, 0, Math.PI * 2, true);
				ctx.fill();
			}

			function rect(x, y, w, h) {
				ctx.beginPath();
				ctx.rect(x, y, w, h);
				ctx.closePath();
				ctx.fill();
				ctx.stroke();
			}

			function clear() {
				ctx.clearRect(0, 0, WIDTH, HEIGHT);
			}

			function init() {
				canvas = document.getElementById("canvas");
				ctx = canvas.getContext("2d");
				return setInterval(draw, 10);
			}

			function doKeyDown(evt) {
				switch (evt.keyCode) {
				case 38: /* Up arrow was pressed */
					if (y - dy > 0) {
						y -= dy;
					}
					break;
				case 40: /* Down arrow was pressed */
					if (y + dy < HEIGHT) {
						y += dy;
					}
					break;
				case 37: /* Left arrow was pressed */
					if (x - dx > 0) {
						x -= dx;
					}
					break;
				case 39: /* Right arrow was pressed */
					if (x + dx < WIDTH) {
						x += dx;
					}
					break;
				}
			}

			function draw() {
				clear();
				ctx.fillStyle = "white";
				ctx.strokeStyle = "black";
				rect(0, 0, WIDTH, HEIGHT);
				ctx.fillStyle = "purple";
				circle(x, y, 10);
			}

			init();
			window.addEventListener('keydown', doKeyDown, true);
		</script>
	</section>
</body>
</html>